<template>
	<div class="app-container">

		<!--搜索区域-->
		<el-row>
		  <el-col :span="20">
		  	  <el-select v-model="value" placeholder="评分分值">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>

		  	<el-button style="margin-left:20px" type="success" round size="small"  @click="getList">查询</el-button>
		 
		 	<!-- 新增标签模块 -->
		 	<el-button type="success" round size="small" @click="dialogFormVisible = true">新增+</el-button>
		 	<el-dialog title="新增术语" width="30%" :visible.sync="dialogFormVisible">
			 
			  <el-form :model="form" ref="form"  :inline="true" :rules="rules" class="demo-form-inline">
			    <el-form-item label="评分分值" prop="evaluationTagPoints" :label-width="formLabelWidth">
			      <el-select v-model="form.evaluationTagPoints" placeholder="请选择">
			      	<el-option label="请选择" value=""></el-option>
			        <el-option label="1分" value="1"></el-option>
			        <el-option label="2分" value="2"></el-option>
			        <el-option label="3分" value="3"></el-option>
			        <el-option label="4分" value="4"></el-option>
			        <el-option label="5分" value="5"></el-option>
			      </el-select>
			    </el-form-item>
			    <el-form-item label="术语" prop="evaluationTagName" :label-width="formLabelWidth">
			      <el-input v-model="form.evaluationTagName" style="width:100%" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
			  </div>
			</el-dialog>

		  </el-col>
		</el-row>

		<!--表格列表模块-->
		<template>
		  <el-table
		    :data="tablist" stripe style="width: 100%">
		    <el-table-column type="index" label="序号" width="180"></el-table-column>
		    
		    <el-table-column prop="evaluationTagPoints" label="评分分值" width="180">
		    	<template slot-scope="scope">
                   <template v-if="scope.row.edit">
                    <el-select v-model="scope.row.evaluationTagPoints" placeholder="请选择">
			      	<el-option label="请选择" value=""></el-option>
			        <el-option label="1分" value="1"></el-option>
			        <el-option label="2分" value="2"></el-option>
			        <el-option label="3分" value="3"></el-option>
			        <el-option label="4分" value="4"></el-option>
			        <el-option label="5分" value="5"></el-option>
			      </el-select>
                  </template>
                  <span v-else>{{scope.row.evaluationTagPoints}}</span>
                </template>
		    </el-table-column>

		     <el-table-column  property="evaluationTagName" label="术语" width="300">
                <template slot-scope="scope">
                   <template v-if="scope.row.edit">
                    <el-input v-model="scope.row.evaluationTagName"  min-width="20px" class="edit-input" size="small"/>
                  </template>
                  <span v-else>{{scope.row.evaluationTagName}}</span>
                </template>
             </el-table-column>

              <el-table-column   align="center" label="操作" width="300">
                <template slot-scope="scope">
                  <el-button  v-if="!scope.row.edit" icon="el-icon-delete"  type="danger" @click="deleteTag(scope.row)">删除</el-button>
                  <el-button v-if="!scope.row.edit"  icon="el-icon-edit" type="warning"  @click="scope.row.edit=!scope.row.edit">编辑</el-button>
                  <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="updateTag(scope.row)">修改</el-button>
                  <el-button v-if="scope.row.edit" class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" 
                    @click="cancelEdit(scope.row)">取消</el-button>
                </template>
            </el-table-column>

		  </el-table>
		</template>

	    <!--分页-->
	    <div class="pagination-container">
	      <el-pagination v-show="total>0" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
	    </div>  

	</div>
</template>



<script>
  import {fetchListTag,updateTag,deleteTag,addTag} from '@/api/evaluation'
  export default {
    data() {
      return {
      	 tablist:null,
      	 total:1,
         listLoading: true,
	     listQuery: {
	        page: 1,
	        pageSize: 10,
	        keyword: null,
	        evaluationTagPoints:null,
	        time:null,
	        pageNumber:null
	        
	    },
      	options: [{
          value: '',
          label: '请选择'
        },{
          value: '1',
          label: '1分'
        }, {
          value: '2',
          label: '2分'
        }, {
          value: '3',
          label: '3分'
        }, {
          value: '4',
          label: '4分'
        }, {
          value: '5',
          label: '5分'
        }],
        value: '',
        dialogFormVisible: false,
        form: {
          evaluationTagName: '',
          evaluationTagPoints: '',
        },
        formLabelWidth: '120px',
        rules: {
        evaluationTagName: [
          { required: true, message: '请输入术语', trigger: 'blur' }
        ],
        evaluationTagPoints:[
          {required: true, message: '请输入分值', trigger: 'blur' }
        ]
      },
      }
    },
    created() {
        this.getList();
    },
    methods: {
        handleSizeChange(val){
          this.listQuery.pageSize=val
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.page=val
          this.getList();
        },
        cancelEdit(row) {
          row.edit = false
          this.$message({
            message: '取消成功',
            type: 'warning'
          })
        },
        deleteTag(row){
        	this.$confirm('确认删除该标签?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            	var data={
        			evaluationTagId	: row.evaluationTagId,
        		}
                deleteTag(data).then(response =>{
                  if(response.data.status=='ok'){
                      this.getList();
                      this.$message({
                        message: '删除成功',
                        type: 'success'
                      })
                    }else{
                       this.$message({
                          message: '删除失败',
                          type: 'warning'
                       })
                    }
                  }).catch(error =>{
                    this.$message({
                          message: '删除失败',
                          type: 'warning'
                    })
                    console.log(error);
                  })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        updateTag(row){

        	if(!row.evaluationTagName ||!row.evaluationTagId){
            this.$message({
                message: '输入正确的术语',
                type: 'warning'
            })
            return;
            }
            if(!row.evaluationTagPoints ||!row.evaluationTagId){
            this.$message({
                message: '输入正确的分值',
                type: 'warning'
            })
            return;
            }
        	var data={
        		evaluationTagId	: row.evaluationTagId,
        		evaluationTagName :row.evaluationTagName,
        		evaluationTagPoints:row.evaluationTagPoints
        	}
			 updateTag(data).then(response =>{
              if(response.data.status=='ok'){
                  this.getList();
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                }else{
                   this.$message({
                      message: '修改失败',
                      type: 'warning'
                   })
                }
              }).catch(error =>{
                this.$message({
                      message: '修改失败',
                      type: 'warning'
                })
                console.log(error);
              })
        },
        getList() {
          this.tablist=[];
          this.listLoading = true
          this.listQuery.pageNumber = (this.listQuery.page-1)*this.listQuery.pageSize;
          this.listQuery.evaluationTagPoints = this.value;
          fetchListTag(this.listQuery).then(response => {
            if( response.data.status=='success'){
              if(response.data.data.list.length==0){
                  this.listLoading = false;
                  this.tablist=[];
                  return
              }
              this.total=response.data.data.total;
              var items = response.data.data.list;
              if(items){
                  this.tablist = items.map(v => {
                    this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
                    return v
                  })
              }

              this.listLoading = false;
            }else if(response.data.status=='token_check_faild'){
               this.$message({
                  message: response.data.messge,
                  type: 'warning'
                })
               this.listLoading = false;
            }
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '数据加载失败',
               type: 'warning'
            })
            this.listLoading = false;
          })
        },
        submitForm(formName) {//提交集合表单
          this.$refs[formName].validate((valid) => {
          if (valid) {
          	var formData={
               evaluationTagName:this.form.evaluationTagName,
               evaluationTagPoints:this.form.evaluationTagPoints
          	}
          // var formData = new FormData()
          // formData.append('evaluationTagName', this.form.evaluationTagName)
          // formData.append('evaluationTagPoints',this.form.evaluationTagPoints)
            addTag(formData).then(response => {
              if(response.data.status=='success'){
                this.$message({
                 message: '添加成功',
                 type: 'success'
                })
                setTimeout(() => {
                 this.dialogFormVisible = false
                 this.getList()
                }, 1.5 * 1000)
                
              }else{
                this.$message({
                 message:'添加失败：'+response.data.messge,
                 type:'error'
                })
              }
            }).catch(error => {
              console.log(error)
              this.listLoading = false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
